<template>
   	<div class="wrap">
		<v-header></v-header>
		<section class="main">
			<div class="user">
				<div class="userhead">
					<img src="../assets/userhead.png">
					<div class="userinfo">
						<p class="user-tel">
							您好！<span>{{ user }}</span>
						</p>
						<p class="user-tag">
							<span class="mLevel">{{ tagLevel }}</span>
							<span class="mName">{{ tagName }}</span>
						</p>
					</div>
				</div>
				<div class="userstill">
					<div class="still">
						申请借款 <span>{{ Apply }}笔</span>
					</div>
					<div class="still2 still">
						待还借款 <span>{{ still }}笔</span>
					</div>
				</div>
			</div>
			<div class="list2">
				<v-list :list="list"></v-list>
			</div>
			<div class="logout">退出登陆</div>
		</section>
		<v-footer :footList='footList'></v-footer>
   	</div>
</template>

<script>
import vHeader from './public/header'
import vFooter from './public/footer'
import vList from './public/list'
export default {
	data() {
	   	return {
	   		user : '150****5678',
	   		Apply : '1',
	   		still : '0',
	   		tagLevel : '学徒',
	   		tagName : '白手起家',
			list : [
				{
					title: '我的借款',
	                href: '/user/borrowList',
	                has: false,
	                num : 1
        	    },
				{
					title: '我的还款',
	                href: '/user/repayList',
	                has: false,
        	    },
				{
					title: '我的奖励',
	                href: '/user/expired',
	                has: false,
        	    },
				{
					title: '帮助中心',
	                href: '/',
	                has: false,
        	    },
				{
					title: '意见反馈',
	                href: '/',
	                has: false,
        	    },
				{
					title: '关于我们',
	                href: '/',
	                has: false,
        	    },
        	],
        	footList : [
				{
					url : '/',
					title : '借款'
				},
				{
					url : '/credit',
					title : '信用'
				},
				{
					url : '/user',
					title : '个人中心'
				},
			]
	   	}
	},
	created () {
		this.Apply = this.$store.state.count;
    	this.list[0].num = this.$store.state.count;
    	this.list[1].num = this.$store.state.repay;
    	this.list[2].num = this.$store.state.expired;
	},
	components: {
		vHeader,vFooter,vList
	},
}
</script>

<style type="text/css">
	.user{overflow: hidden; background: #fff; margin-bottom: 0.12rem;}
	.user .userhead img{width: 0.5rem; height: 0.5rem; margin-right:0.2rem; float: left;}
	.user .userhead{overflow: hidden; padding: 0.12rem 0.1rem 0.06rem; margin-bottom: 0.05rem;}
	.user .userhead .user-tel span{display: block; color: #999; line-height: 0.18rem;}
	.user .userhead .user-tag span{color: #999; margin-right: 0.45rem; font-size: 0.12rem;}
	.user .userstill{border-top:1px solid #dfdfdf; padding: 0.06rem 0; overflow: hidden;}
	.user .userstill .still{width: 49.5%; text-align: center; float: left;}
	.user .userstill .still span{display: block; font-size: 0.16rem; color: #3297fd;}
	.user .userstill .still2{ border-left:1px solid #dfdfdf;}
	.logout{margin: 0.08rem auto 0.35rem; border-radius: 2px; background: #f22f2f; color: #fff; width: 100%; height: 0.38rem; line-height: 0.38rem; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; cursor: pointer; text-align: center; font-size: 0.16rem;}
	.list2 .icon{background: url(../assets/icon3.png) no-repeat;width: 0.35rem; height: 0.4rem; float: left;background-size: 60%;}
	.list2 .icon1 {background-position: center 0.1rem;}
	.list2 .icon2 {background-position: center -0.28rem;}
	.list2 .icon3 {background-position: center -0.67rem;}
	.list2 .icon4 {background-position: center -1.05rem;}
	.list2 .icon5 {background-position: center -1.44rem;}
	.list2 .icon6 {background-position: center -1.82rem;}
</style>
